<template>
  <video
    ref="bgVideo"
    id="background_video"
    loop
    muted
    src="https://img.cdn.ceart.top/back.mp4"
  />
  <p-section>
    <p-fp-tablecell>
      <p-banner-container>
        <p-banner-top-img>
          <router-link to="/article">
            <img src="../../assets/images/admin.jpg">
          </router-link>
        </p-banner-top-img>
        <p-banner-h1>小锅锅☻Blog🍁</p-banner-h1>
        <!-- <p-blog-intro>{{ typewriter }}</p-blog-intro> -->
        <p-cover-btns>
          <router-link :to="{path:'/article'}">
            <i class="iconfont icon-blog" />开始阅读
          </router-link>
          <a
            href="http://blog.ceart.top/"
            target="__blank"
          ><i class="iconfont icon-blog" />旧版博客</a>
        </p-cover-btns>
      </p-banner-container>
    </p-fp-tablecell>
  </p-section>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'HomeView',
  async setup () {
    const typewriter = ref('')
    const bgVideo:any = ref(null)
    // 页面加载时
    onMounted(() => {
      document.title = '首页 - 小锅锅·博客'
      bgVideo.value.play()
      console.log('%c页面加载耗时：13ms | Theme By Joe', 'color:#fff; background: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3); padding: 8px 15px; border-radius: 0 15px 0 15px')
    })

    return { typewriter, bgVideo }
  }
})
</script>

<style lang="sass" scoped>
@keyframes pageTitleText
  0%
    text-shadow: 2px 0 0 tomato
  10%
    text-shadow: -2px -2px 0 gold
  20%, 100%
    text-shadow: 2px 0 0 #0f0
  30%, 70%
    text-shadow: 2px 0 0 #40e0d0
  40%
    text-shadow: 2px 2px 0 tomato
  50%
    text-shadow: 0 -2px 0 gold
  60%
    text-shadow: 0 2px 0 #0f0
  80%
    text-shadow: 2px -4px 0 tomato
  90%
    text-shadow: 2px 2px 0 gold

video
  @apply fixed left-1/2 top-1/2 h-full w-full bg-white object-cover
  background: linear-gradient(90deg, #ffd7e4 0%, #c8f1ff 100%)
  transform: translate(-50%, -50%)
  z-index: -1

p-section
  @apply overflow-hidden table table-fixed relative w-full p-0
  height: calc(100vh - 220px)

  p-fp-tablecell
    @apply table-cell align-middle relative w-full h-full z-10
    opacity: 0.96

    p-banner-container
      @apply text-center text-white block
      margin-top: -10rem

      p-banner-top-img
        img
          height: 14rem
          width: 14rem
          border-radius: 50%
          margin: auto
          border: 3px solid hsla(0,0%,100%,.3)

      p-banner-h1
        @apply block font-bold relative cursor-pointer
        font-family: 'Pacifico', sans-serif
        font-size: 2.8rem
        padding: 2rem
        border-bottom: 1px solid hsla(0,0%,60%,.4)
        letter-spacing: -1px
        text-shadow: 0 3px 6px rgb(0 0 0 / 30%)
        animation: pageTitleText 2s infinite
        animation-delay: .3s
        &:after
          @apply absolute
          content: ''
          left: 0
          bottom: 0
          height: 2px
          width: 0
          background: #f0094a
          box-shadow: -1px -1px 5px 0 #fff, 7px 7px 20px 0 #0003, 4px 4px 5px 0 #0002
          transition: 400ms ease all

        &:hover:after
          width: 100%
          transition: 800ms ease all

      p-blog-intro
        @apply block font-bold
        margin-top: 1.5rem
        font-size: 2rem

      p-cover-btns
        @apply relative text-center

        a
          @apply inline-block bg-transparent text-white shadow-none
          margin: 1rem 1.5rem
          padding: 0 3.5rem
          height: 2.8rem
          line-height: 2.8rem
          font-size: 1.2rem
          border: 1px solid #fff
          border-radius: 3rem
          letter-spacing: .5px
          transition: .3s ease-out

          &:hover
            border: 1px solid #f44336
            background-color: #f44336
            box-shadow: 0 14px 26px -12px rgb(233 30 99 / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(233 30 99 / 20%)
          i
            @apply inline-block
            margin-right: .5rem
</style>
